<template>
  <div class="lend-wrap">
    <div v-if="showPage == 1">
      <div class="lend-head">
        <div class="date-box">
          <div class="date-con">
            <div class="pic1-box" @click="preDay">
              <img src="./left.png" class="pic1" onclick="return false"/>
            </div>
            <datetime format="YYYY-MM-DD" v-model="month" class="date-time" :end-date="date"
                      @on-confirm="queryMonthLend"></datetime>
            <div class="pic2-box" @click="nextDay">
              <img src="./right.png" class="pic2" onclick="return false"/>
            </div>
          </div>
        </div>

        <div class="screen-box">
          <div class="open-box" @click="openModal">
            <img src="../screening.png" class="pic3" onclick="return false"/>
            <span class="all">{{title}}</span>
            <img src="../down.png" class="pic4" onclick="return false"/>
          </div>
        </div>
      </div>


      <div class="lend-box" ref="wrapper" v-if="showData == 1">
        <div class="lend-list">

          <div class="lend-con" v-for="(item,index) in lendList" :key="index" v-if="lendList.length"
               @click="particulars(item.id)">
            <div class="content-box1">
              <img :src="item.userUrl" class="pic5" v-if="item.userUrl!='' && item.userUrl!=null"
                   onclick="return false"/>
              <div class="pic5" v-else></div>
              <div class="user-box">
                <span class="name">{{item.userName}}</span>
                <span class="number">{{item.certNo}}</span>
              </div>
              <div class="money">借支金额：{{item.lendMoney | decimal}}元</div>
            </div>

            <div class="content-box2">
              <span class="upload">{{item.userWorkImage == ''?'未上传图片':'已上传图片'}}</span>
              <img src="./remind.png" class="remind-pic" v-show="item.refuseNum >= 2 && item.status == 0"/>
              <div class="btn-box" v-if="item.status == 0">
                <button type="button" class="pass"
                        @click="pass(item.id,item.userName,item.certNo,item.lendMoney,item.userRemark,item.refuseNum)">
                  通过
                </button>
                <button type="button" class="refuse" @click="refuse(item.id)">拒绝</button>
              </div>
              <span class="title" :class="{'active':item.status == 2}" v-else>{{item.status == 1?'已通过':'已拒绝'}}</span>
            </div>
          </div>

          <div class="more-box" v-show="noMoreData && showData == 1">没有更多了~</div>
        </div>
      </div>

      <!--筛选-->
      <div class="screen-modal" v-show="showScreen">
        <div class="screen-con">
          <div class="content-sec">
            <div class="sec" @click="queryScreen(3,'全部')" :class="{'active2':type == 3}">全部
              <img src="../get.png" v-if="type == 3" class="pic7" onclick="return false"/>
            </div>
            <div class="sec" @click="queryScreen(0,'待处理')" :class="{'active2':type == 0}">待处理
              <img src="../get.png" v-if="type == 0" class="pic7" onclick="return false"/>
            </div>
            <div class="sec" @click="queryScreen(1,'已通过')" :class="{'active2':type == 1}">已通过
              <img src="../get.png" v-if="type == 1" class="pic7" onclick="return false"/>
            </div>
            <div class="sec" @click="queryScreen(2,'已拒绝')" :class="{'active2':type == 2}">已拒绝
              <img src="../get.png" v-if="type == 2" class="pic7" onclick="return false"/>
            </div>
          </div>
        </div>
      </div>
      <!--空页面-->
      <div class="empty-wrap" v-if="showData == 2">
        <div class="empty-box">
          <div class="img-box"><img src="../empty.png" class="empty" onclick="return false"/></div>
          <div class="tip">抱歉,未找到相关内容~</div>
        </div>
      </div>

      <backpage @backPage="backPage" v-show="!countentPhone"></backpage>
    </div>

    <empty v-if="showPage == 2"></empty>

    <!--微信绑定手机号-->
    <v-phone v-model="showModal" @bindPhone="bindCustomerPhone"></v-phone>

  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env"
  import BScroll from 'better-scroll'
  import {
    getDeviceRatio,
    formatDate,
    getYearMonthDay,
    toDecimal,
    getNextDate,
    setSessionStore, getSessionStore, getUrlKey
  } from "../../../config/util"
  import {Datetime} from 'vux'
  import backpage from "../../../components/backpage"
  import empty from "../../../components/errorpage"
  import phone from "../../../components/phone"

  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   */
  /*上拉配置*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  }

  export default {
    data() {
      return {
        showPage: 0,
        title: "全部",
        showData: 0,
        showScreen: false,
        type: 3,
        lendList: [],
        lendScroll: null,
        currentPage: 1,
        PageSize: 20,
        noMoreData: false,
        userSign: "",
        date: "",
        month: getYearMonthDay(),
        showModal: false,
        countentPhone: "",
      }
    },
    mounted() {
      this.date = formatDate(new Date(), "yyyy-MM-dd");
      this.userSign = getUrlKey("success"); //微信openid
      this.countentPhone = getUrlKey("countentPhone"); //手机框 0弹出1不弹出
      let base64 = require('js-base64').Base64;
      if (this.userSign != "" && this.userSign != "null" && this.userSign != null) {
        setSessionStore("success", base64.encode(this.userSign));
        this.userSign = base64.decode(getSessionStore("success"));
      } else {
        this.userSign = base64.decode(getSessionStore("success"));
      }

      if (this.countentPhone == "0") {
        this.showModal = true;
      } else {
        this.queryResidentAuth();
      }
    },
    methods: {
      queryResidentAuth() {//是否驻厂权限
        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/get_resident_role?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/get_resident_role?sgin=" + this.userSign + "&type=1" + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data == 1) {
            this.showPage = 1;
            this.queryLendList();
          } else {
            this.showPage = 2;
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      preDay() {//前一天
        this.currentPage = 1;
        this.PageSize = 20;
        this.month = getNextDate(this.month, -1);
        this.queryLendList(() => {
          this.$nextTick(() => {
            this.lendScroll = null;
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      nextDay() {//后一天
        if (this.month == getYearMonthDay()) {
          return;
        }
        this.currentPage = 1;
        this.PageSize = 20;
        this.month = getNextDate(this.month, 1);
        this.queryLendList(() => {
          this.$nextTick(() => {
            this.lendScroll = null;
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      queryLendList(callback) {//查询归属劳务工
        this.$vux.loading.show({
          text: '加载中',
        });

        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/query_lend_money_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/query_lend_money_list?sgin=" + this.userSign + "&time=" + this.month + "&status=" + (this.type == 3 ? '' : this.type) + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.length > 0) {
              this.showData = 1;
              this.lendList = resultObj.data;
              for (let i = 0, length = this.lendList.length; i < length; i++) {
                this.lendList[i].certNo = this.$decruption(this.lendList[i].certNo);
              }
              if (callback) {
                callback();
              }
              this.$nextTick(() => {
                this.initScroll();
                this.lendScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.lendScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });
            } else {
              this.showData = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      queryScreen(key, val) {//根据筛选查询
        this.type = key;
        this.title = val;
        this.showScreen = false;
        this.currentPage = 1;
        this.PageSize = 20;
        this.queryLendList(() => {
          this.$nextTick(() => {
            this.lendScroll = null;
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      openModal() {//打开筛选
        this.showScreen = true;
      },
      queryMonthLend(value) {//根据时间查询
        this.currentPage = 1;
        this.PageSize = 20;
        this.month = value;
        this.queryLendList(() => {
          this.$nextTick(() => {
            this.lendScroll = null;
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      particulars(id) {//借支详情
        this.$router.push({path: '/lendparticulars', query: {"id": id}});
      },
      pass(id, name, cert, num, remark, refuseNum, e) {//通过
        if (e && e.stopPropagation) {//如果提供了事件对象，则这是一个非IE浏览器,它支持W3C的stopPropagation()方法
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true;//使用IE的方式来取消事件冒泡
        }
        this.$router.push({
          path: '/lendpass',
          query: {"id": id, "name": name, "cert": cert, "num": num, "remark": remark, "refuseNum": refuseNum}
        });
      },
      refuse(id, e) {//通过
        if (e && e.stopPropagation) {//如果提供了事件对象，则这是一个非IE浏览器,它支持W3C的stopPropagation()方法
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true;//使用IE的方式来取消事件冒泡
        }
        this.$router.push({path: '/lendrefuse', query: {"id": id}});
      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });

          let time = (new Date()).getTime();
          let url = baseUrl + "/resident/query_lend_money_list?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          setTimeout(() => {
            this.axios.get(baseUrl + "/resident/query_lend_money_list?sgin=" + this.userSign + "&time=" + this.month + "&status=" + (this.type == 3 ? '' : this.type) + "&page=" + (++this.currentPage) + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0) {
                if (resultObj.data.length > 0) {
                  for (let i = 0, length = resultObj.data.length; i < length; i++) {
                    resultObj.data[i].certNo = this.$decruption(resultObj.data[i].certNo);
                  }
                  this.lendList = this.lendList.concat(resultObj.data);
                } else {
                  this.noMoreData = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            })
          }, 500)
        }
      },
      initScroll() {//初始化BScroll
        if (!this.lendScroll) {
          this.lendScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.lendScroll.refresh();
        }
      },
      enable() {
        this.lendScroll && this.lendScroll.enable()
      },
      refresh() {
        this.lendScroll && this.lendScroll.refresh()
      },
      finishPullUp() {
        this.lendScroll && this.lendScroll.finishPullUp()
      },
      backPage() {
        this.$router.push({path: "/residentIndex"});
      },
      bindCustomerPhone(phone) {//绑定微信客户手机号
        this.$vux.loading.show({
          text: '加载中',
        });

        let time = (new Date()).getTime();
        let url = baseUrl + "/wx_user/set_phone?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        //绑定微信手机
        this.axios.get(baseUrl + "/wx_user/set_phone?sgin=" + this.userSign + "&phone=" + phone + "&userName=" + "&userUrl=" + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data == 1) {
            this.queryResidentAuth();
          } else {
            this.showModal = true;
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      }
    },
    filters: {
      decimal(money) {
        return toDecimal(money);
      }
    },
    watch: {
      lendList() {
        this.$nextTick(() => {
          this.lendScroll.refresh();
        })
      }
    },
    components: {
      BScroll,
      Datetime,
      backpage,
      empty,
      "v-phone": phone
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"
  .lend-wrap
    wh(100%, 100%)
    background: rgba(242, 242, 242, 1)
    .lend-head
      position: fixed
      top: 0
      wh(100%, auto)
      .date-box
        fj(center, center)
        wh(100%, 1.2rem)
        background: rgba(60, 175, 255, 1)
        .date-con
          fj(center, center)
          .pic1-box
            wh(0.4rem, 0.4rem)
            .pic1
              wh(100%, 100%)
          .date-time
            padding-right: 0.32rem
            padding-left: 0.32rem
            size-color(0.427rem, rgba(255, 255, 255, 1))
          .date-time >>> .weui-cell__ft
            color: rgba(255, 255, 255, 1)
          .date-time >>> .weui-cell__ft .vux-cell-value
            color: rgba(255, 255, 255, 1)
          .pic2-box
            wh(0.4rem, 0.4rem)
            .pic2
              wh(100%, 100%)
      .screen-box
        display: flex
        align-items: center
        wh(100%, 0.8rem)
        .open-box
          display: flex
          align-items: center
          wh(auto, 0.8rem)
          margin-left: 0.293rem
          .pic3
            margin-right: 0.173rem
            wh(0.48rem, 0.48rem)
          .all
            size-color(0.373rem, rgba(102, 102, 102, 1))
            margin-right: 0.12rem
          .pic4
            wh(0.32rem, 0.32rem)
    .lend-box
      position: fixed
      top: 2rem
      wh(100%, auto)
      bottom: 0
      z-index: 88
      overflow: hidden
      background: rgba(242, 242, 242, 1)
      .lend-list
        display: flex
        flex-direction: column
        wh(100%, auto)
        .lend-con
          display: flex
          flex-direction: column
          wh(100%, 2.827rem)
          background: rgba(255, 255, 255, 1)
          border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
          &:last-child
            border-bottom: none
          .content-box1
            display: flex
            wh(auto, 1.387rem)
            margin-top: 0.373rem
            margin-left: 0.32rem
            margin-right: 0.32rem
            margin-bottom: 0.213rem
            .pic5
              wh(1.387rem, 1.387rem)
              background: rgba(242, 242, 242, 1)
              border-radius(50%)
            .user-box
              display: flex
              justify-content: center
              flex-direction: column
              margin-left: 0.267rem
              .name
                padding-bottom: 0.113rem
                size-color(0.453rem, rgba(51, 51, 51, 1))
              .number
                padding-top: 0.113rem
                size-color(0.373rem, rgba(102, 102, 102, 1))
            .money
              margin-left: auto
              margin-top: 0.227rem
              size-color(0.4rem, rgba(60, 175, 255, 1))
              font-weight: bold
          .content-box2
            fj(space-between, center)
            wh(100%, 0.64rem)
            position: relative
            .upload
              margin-left: 0.32rem
              size-color(0.347rem, rgba(204, 204, 204, 1))
            .remind-pic
              position: absolute
              left: 4.6rem
              wh(0.587rem, 0.587rem)
            .btn-box
              margin-right: 0.32rem
              wh(auto, 0.64rem)
              .pass
                wh(1.92rem, 0.64rem)
                line-height: 0.64rem
                text-align: center
                border: 0.027rem solid rgba(60, 175, 255, 1)
                border-radius(0.32rem)
                size-color(0.347rem, rgba(60, 175, 255, 1))
                background: #FFF
                @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
                  line-height: 0.32rem
                }
                @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) {
                  line-height: 0.32rem
                }
                @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
                  line-height: 0.32rem
                }
                @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
                  line-height: 0.32rem
                }
                @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
                  line-height: 0.32rem
                }
                @media screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
                  line-height: 0.32rem
                }
              .refuse
                margin-left: 0.32rem
                wh(1.92rem, 0.64rem)
                line-height: 0.64rem
                text-align: center
                border: 0.027rem solid rgba(255, 83, 83, 1)
                border-radius(0.32rem)
                size-color(0.347rem, rgba(255, 83, 83, 1))
                background: #FFF
                @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
                  line-height: 0.32rem
                }
                @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) {
                  line-height: 0.32rem
                }
                @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
                  line-height: 0.32rem
                }
                @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
                  line-height: 0.32rem
                }
                @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
                  line-height: 0.32rem
                }
                @media screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
                  line-height: 0.32rem
                }
            .title
              margin-right: 0.32rem
              size-color(0.373rem, rgba(153, 153, 153, 1))
            .active
              color: rgba(255, 83, 83, 1)

        .more-box
          text-align: center
          size-color(0.373rem, rgba(153, 153, 153, 1))
          margin-top: 0.64rem
          padding-bottom: 0.8rem
    .screen-modal
      position: fixed
      top: 2rem
      left: 0
      right: 0
      bottom: 0
      z-index: 99
      background-color: rgba(0, 0, 0, 0.5)
      .screen-con
        wh(100%, 4.787rem)
        background: #FFF
        .content-sec
          display: flex
          flex-direction: column
          wh(auto, 100%)
          margin-left: 0.48rem
          margin-right: 0.507rem
          .sec
            display: flex
            align-items: center
            height: 1.067rem
            line-height: 1.067rem
            size-color(0.427rem, rgba(102, 102, 102, 1))
            &:nth-child(1)
              margin-top: 0.267rem
          .active2
            color: $color
          .pic7
            margin-left: auto
            wh(0.64rem, 0.64rem)
    .empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 2rem
      left: 0
      right: 0
      bottom: 0
      z-index: 1
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)


</style>
